<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr><th>商品名</th><th>价格</th><th>销量</th></tr>
</table>
<script>
  //实例化一个空对象
  let p1 = {};
  //为p1添加name和age属性
  p1.name = "张三";
  p1.age = "18";
  //为p1添加run方法
  p1.run = function () {
    console.log(this.name+":"+this.age);
  }
  //调用run方法
  p1.run();
  //实例化一个自带属性和方法的对象
  let p2 = {
      name:"李四",
      age:22,
      run:function(){
          console.log(this.name+":"+this.age)
  }
  }
  //调用run方法
  p2.run();
  //通过对象封装一个对象属性
  let product={name:"小米手机",price:2000,num:200};
  //使用数组封装多个商品属性
  let arr =[{name:"小米电视",price:3000,num:300},
      {name:"小米电饭煲",price:1000,num:150},
      {name:"小米扫地机器人",price:5000,num:20}]
  //获取表格元素
  let table = document.querySelector("table");
  //for of相当于java中的新循环,遍历数组
  for (let p of arr) {
      let tr = document.createElement("tr");
      let nametd = document.createElement("td");
      let pricetd = document.createElement("td");
      let numtd = document.createElement("td");
      nametd.innerText=p.name;
      pricetd.innerText=p.price;
      numtd.innerText=p.num;
      tr.append(nametd,pricetd,numtd);
      table.append(tr);

  }

</script>

</body>
</html>